<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <i class="iconfont iconleftarrow"></i>
      <div class="header dpflex">
            <div class="header-left flex1">
                  <h5 class="zh-text">我的徽章</h5>
                  <span class="en-text">MY BADGES</span>
                </div>
            <div class="header-right flex1 dpflex">
                  <h6 class="title">今日排名</h6>
                  <span class="rank-num" id="rankNum"></span>
                </div>
          </div>
      <ul class="content flex1 dpflex" id="badgeList">
            <li class="badge-item">
                  <img src="../images/mybadge01.jpg" alt="">       <span>连续训练天数</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge02.jpg" alt="">       <span>累积训练天数</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge03.jpg" alt="">       <span>训练次数</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge04.jpg" alt="">       <span>跑步次数</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge05.jpg" alt="">       <span>骑行次数</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge06.jpg" alt="">       <span>明星圈友</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge07.jpg" alt="">       <span>评论达人</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge08.jpg" alt="">       <span>运动铁粉</span>
                </li>
            <li class="badge-item">
                  <img src="../images/mybadge09.jpg" alt="">       <span></span>
                </li>
          </ul>

    <script>
        /* 获取dom */
        const badgeList = document.querySelector('#badgeList')
        const rankNum = document.querySelector('#rankNum')
        /* 渲染徽章列表 */
        function randerBadgeList(data) {
            let badgesArr = [
                ` <li class="badge-item">
              <img src="../images/mybadge01.jpg" alt="">       <span>连续训练天数</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge02.jpg" alt="">       <span>累积训练天数</span>
            </li>`,
                `<li class="badge-item">
              <img src="../images/mybadge03.jpg" alt="">       <span>训练次数</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge04.jpg" alt="">       <span>跑步次数</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge05.jpg" alt="">       <span>骑行次数</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge06.jpg" alt="">       <span>明星圈友</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge07.jpg" alt="">       <span>评论达人</span>
            </li>`,
                `<li class="badge-item">
              <img src="../images/mybadge08.jpg" alt="">       <span>运动铁粉</span>
            </li>`,
                ` <li class="badge-item">
              <img src="../images/mybadge09.jpg" alt="">       <span></span>
            </li>`,
            ]

            let renderData = badgesArr.filter(function (item, index) {
                if (data.includes(index + 1) || index === badgesArr.length - 1) {
                    return true
                } else {
                    return false
                }
            })

            // 渲染
            badgeList.innerHTML = renderData.join('')
        }
        /* 获取徽章数据 */
        function getBadges() {
            $http.get('/users/sportsBadge/1', function (res) {
                let status = res.status
                let data = res.data

                if (status === 0) {
                    // 渲染徽章列表
                    randerBadgeList(data)
                }
            })
        }
        // 调用函数 获取用户徽章信息
        getBadges()

        /* 获取头部排名 */
        function getSportData() {
            $http.get('/headPageInfo/?userId=1', function (res) {
                let status = res.status
                if (status === 0) {
                    let rank = res.data.rank
                    rankNum.textContent = rank;
                }
            })
        }
        getSportData()
    </script>
     
</body>

</html>